<template>
  <div style="display: flex; justify-content: flex-end">
    <a-button type="text" @click="showModal">
      <plus-outlined/>
    </a-button>
    <a-dropdown :trigger="['click']">
      <a-button type="text">
        <menu-outlined />
      </a-button>
      <template #overlay>
        <a-menu @click="moreMenuClick">
          <a-menu-item key="hideComplete">
            <a-row type="flex" align="middle">
              <span>隐藏已完成</span>
              <a-switch v-model:checked="isHideComplete" size="small"></a-switch>
            </a-row>
          </a-menu-item>
          <a-menu-item key="showTimeLine">时间线视图</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
  <a-list class="task-list" size="large" bordered :data-source="contentData.list" @scroll="handleScroll">
    <template #renderItem="{ item }">
      <!--      <a-dropdown :trigger="['contextmenu']">-->
      <a-list-item>
        <TaskItem :ref="'task' + Number(item.prefix)" :item="item"/>
      </a-list-item>
      <!--        <template #overlay>-->
      <!--          <a-menu @click="menuClick($event, item)">-->
      <!--            <a-menu-item key="edit">编辑</a-menu-item>-->
      <!--            <a-menu-item key="delete">删除</a-menu-item>-->
      <!--          </a-menu>-->
      <!--        </template>-->
      <!--      </a-dropdown>-->
    </template>
  </a-list>
  <TaskModal :board="contentData.board" :mVisible="modalVisible" :closeModal="closeModal" :boards="boards"></TaskModal>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { PlusOutlined, MenuOutlined } from '@ant-design/icons-vue';
import TaskItem from './TaskItem.vue';
import TaskModal from "./TaskModal.vue";
import taskCommend from "../task_manager/commend";
import { getListScrollTop, setListScrollTop } from "../task_manager/scroll";
import { mapActions, mapMutations, mapState } from "vuex";

export default defineComponent({
  props: {
    contentData: Object,
    boards: Array
  },
  setup() {
    const modalVisible = ref(false);
    return {
      modalVisible
    };
  },
  components: {
    PlusOutlined,
    MenuOutlined,
    TaskItem,
    TaskModal,
  },
  mounted() {
    const el = document.querySelector('.task-list')
    el.scrollTop = getListScrollTop();
  },
  methods: {
    ...mapActions("timeline", ["getTimelineTask"]),
    ...mapMutations("panes", ["setHideComplete"]),
    handleScroll(e) {
      setListScrollTop(e.target.scrollTop);
    },
    showModal() {
      this.modalVisible = true;
    },
    closeModal() {
      this.modalVisible = false;
    },
    menuClick(e, item) {
      const target = e.key;
      const key = Number(item.prefix);
      if (target === "delete") {
        const input = [key];
        const flag = {delete: true};
        taskCommend(input, flag);
      } else if (target === "edit") {
        const child = `task${Number(item.prefix)}`;
        this.$refs[child].showDrawer();
      }
    },
    moreMenuClick(e) {
      const target = e.key;
      if (target === "hideComplete") {
        this.switchHideChange(!this.isHideComplete);
        return;
      }
      if (target === "showTimeLine") {
        this.getTimelineTask().then(() => {
          this.$router.push('/timeline');
        });
      }
    },
    switchHideChange(checked) {
      this.setHideComplete(checked);
      this.$store.dispatch('panes/getTaskData');
    }
  },
  computed: mapState({
    isHideComplete: state => state.panes.isHideComplete,
  }),
  created() {
    this.$store.dispatch('panes/getHideFlag');
  }
});

</script>

<style scoped>

</style>